<script>
	import BaseLayout from '@/components/BaseLayout/index.vue';
	import {
		conditioningSchemeList1
	} from '@/services/api/regulate';
	import {
		router
	} from '@/utils/router';
	import {
		VITE_IMAGE_URL,
	} from '../../utils/http/url.js'
	export default {
		data() {
			return {
				baseImgUrl: VITE_IMAGE_URL,
				cateId: null,
				options: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 50,
						stretch: -10,
						depth: 350,
						modifier: 1,
						slideShadows: true,
					},
					loop: false,
				},
				list: [],
				// 获取调理方案列表
				conditioningSchemeLists: [],
				content: [{
					icon: 'tmicon-alert',
					content: '暂无调理方案 请重新选择调理症状',
				}, ]
			}
		},
		components: {
			BaseLayout
		},
		onLoad(options) {
			this.cateId = options.cateId;
			console.log('this.cateId', this.cateId);
			this.getConditioningSchemeList();
		},
		onShow() {},
		onHide() {},
		onUnload() {},
		methods: {
			prev() {
				this.$refs.zSwiper1.swiper.slidePrev();
			},
			next() {
				this.$refs.zSwiper1.swiper.slideNext();
			},
			getConditioningSchemeList() {
				conditioningSchemeList1({
						'classificationId': this.cateId
					})
					.then((res) => {
						this.conditioningSchemeLists = res.rows;
						this.list = new Array(res.rows.length).fill('');
					})
					.catch((err) => {
						console.log('获取调理方案列表失败', err);
					});
			},
			toConfirm(item, detailId) {
				uni.navigateTo({
					url: `/pages/regulate/confirm?id=${item.id}&conditioningRecordId=${detailId}`
				})
			},
			back() {
				uni.navigateBack()
			}
		},
	}
</script>

<template>
	<view class="" style="width: 100%;height: 100vh;">
		<BaseLayout>
			<view class="bg2"
				style="margin-left: auto;margin-right: auto;margin-top: 14rpx;display: flex;align-items: center;justify-content: space-between;height: 84%;width: 693rpx;padding: 20rpx;position: relative;">
				<!-- <view class="uno-w-28% uno-h-95%">
          <view class="uno-h-23rpx bg1 uno-w-159rpx uno-flex uno-items-center uno-text-9rpx uno-c-#fff uno-pl-12rpx"> 申请人信息 </view>
          <view class="uno-w-140rpx uno-flex uno-items-center uno-justify-between uno-mt-16rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">头像:</text>
            <image v-if="detailInfo" :src="`${baseImgUrl}${detailInfo.consumerPortrait}`" mode="scaleToFill" class="uno-w-32rpx uno-h-32rpx uno-rounded-50%" />
            <image v-else src="/static/images/avatar.png" mode="scaleToFill" class="uno-w-32rpx uno-h-32rpx uno-rounded-50%" />
          </view>
          <view class="uno-w-140rpx uno-flex uno-items-center uno-justify-between uno-mt-8rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">微信名称:</text>
            <text class="uno-text-9rpx uno-c-#fff">{{ detailInfo?.consumerName || '--' }}</text>
          </view>
          <view class="uno-h-23rpx bg1 uno-w-159rpx uno-flex uno-items-center uno-text-9rpx uno-c-#fff uno-pl-12rpx uno-mt-20rpx"> 申请记录信息 </view>
          <view class="uno-w-160rpx uno-flex uno-items-center uno-justify-between uno-mt-14rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">会员编号:</text>
            <text class="uno-text-9rpx uno-c-#fff">{{ detailInfo?.consumerId || '--' }}</text>
          </view>
          <view class="uno-w-160rpx uno-flex uno-items-center uno-justify-between uno-mt-10rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">调理部位:</text>
            <view v-if="detailInfo" class="uno-text-9rpx uno-c-#fff uno-flex uno-items-center uno-w-70%">
              <uni-data-select v-model="positionId" :localdata="positionLists" @change="changePosition" />
              <image src="/static/images/tlfa_icon_bj.png" mode="scaleToFill" class="uno-w-8rpx uno-h-8rpx uno-ml-4rpx" />
            </view>
          </view>
          <view class="uno-w-160rpx uno-flex uno-items-center uno-justify-between uno-mt-10rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">调理症状:</text>
            <view v-if="detailInfo" class="uno-text-9rpx uno-c-#fff uno-flex uno-items-center uno-w-70%">
              <uni-data-select v-model="symptomId" :localdata="symptomLists" @change="changeSymptom" />
              <image src="/static/images/tlfa_icon_bj.png" mode="scaleToFill" class="uno-w-8rpx uno-h-8rpx uno-ml-4rpx" />
            </view>
          </view>
          <view class="uno-w-160rpx uno-flex uno-items-center uno-justify-between uno-mt-10rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">申请时间:</text>
            <text class="uno-text-9rpx uno-c-#fff">{{ detailInfo?.createTime || '--' }}</text>
          </view>
          <view class="uno-w-160rpx uno-flex uno-items-center uno-justify-between uno-mt-12rpx uno-pl-5rpx">
            <text class="uno-text-9rpx uno-c-#fff">消费卡种:</text>
            <text class="uno-text-9rpx uno-c-#fff">{{ detailInfo?.consumerMembershipCard?.cardName || '--' }}</text>
          </view>
        </view> -->
				<view style="width: 100%;height: 300rpx;padding-top: 20rpx;">
					<template v-if="list.length">
						<z-swiper v-if="list.length" ref="zSwiper1" v-model="list" :options="options">
							<z-swiper-item v-for="(item) in conditioningSchemeLists" :key="item.id"
								:custom-style="{ width: '210rpx', height: '230rpx' }">
								<view class="bg3"
									style="width: 100%;height: 100%;padding: 10rpx;padding-left: 16rpx;padding-right: 16rpx;">
									<view class=""
										style="width: 100%;height: 15rpx;display: flex;align-items: center;justify-content: space-between;">
										<image src="../../static/images/tlfa_icon_btjt.png" mode="scaleToFill" class=""
											style="width: 5rpx;height: 10rpx;" />
										<view class="text1 "
											style="font-weight: 700;font-size: 9rpx; flex: 1;margin-left: 5rpx;margin-right: 5rpx;">
											调理方案
										</view>
										<image v-if="item.recommendStatus === 'Y'"
											src="../../static/images/tlfa_icon_tj.png" mode="scaleToFill"
											style="width: 9rpx;height: 10rpx;" />
										<image v-if="item.recommendStatus === 'N'"
											src="../../static/images/tlfa_icon_btj.png" mode="scaleToFill"
											style="width: 9rpx;height: 10rpx;" />
									</view>
									<image src="../../static/images/tlfa_icon_btdbx.png" class=""
										style="width: 100%;height: 2rpx;display: block;margin-top: 5rpx;margin-bottom: 5rpx;" />
									<view class="uno-w-full bg4" style="margin-top: 10rpx;padding-top: 1rpx;">
										<view class="uno-w-full"
											style="height: 8rpx;font-size: 7rpx;color: #71CDF9;text-align: right;margin-top: 8rpx;">
											方案名称：</view>
										<view class="uno-w-full"
											style="height: 8rpx;font-size: 8rpx;color: #FFFFFF;text-align: right;margin-top: 10rpx;">
											{{ item.conditioningName || '--' }}
										</view>
										<view class="uno-w-full"
											style="height: 8rpx;font-size: 7rpx;color: #71CDF9;text-align: right;margin-top: 10rpx;">
											总调理时长(秒)：</view>
										<view class="uno-w-full"
											style="height: 8rpx;font-size: 8rpx;color: #FFFFFF;text-align: right;margin-top: 5rpx;">
											{{ item.conditioningDuration }}
										</view>
										<view class="uno-w-full"
											style="margin-top: 15rpx;display: flex;align-items: center;justify-content: space-between;padding-left: 12%;height: 18rpx;padding-right: 6rpx;">
											<view class="" style="width: 11rpx;height: 11rpx;margin-right: 6rpx;">
												<image :src="`${baseImgUrl}${item.schemeSymptomType.symptomTypeIcon}`"
													mode="scaleToFill" class="uno-w-full uno-h-full uno-block" />
											</view>
											<view class=""
												style="color: #71CDF9;font-size: 8rpx;flex: 1;text-align: left;">症状：
											</view>
											<view class="" style="color: #FFFFFF;font-size: 8rpx;">
												{{ item.schemeSymptomType.symptomTypeName }}
											</view>
										</view>
									</view>
									<view class="uno-w-full"
										style="height: 20rpx;background-color: rgba(0,233,255,0.15);margin-top: 5rpx;display: flex;align-items: center;justify-content: space-between;padding-left: 6rpx;padding-right: 6rpx;">
										<view class="" style="width: 11rpx;height: 11rpx;margin-right: 6rpx;">
											<image :src="`${baseImgUrl}${item.schemeSymptomPosition.positionIcon}`"
												mode="scaleToFill" class="uno-w-full uno-h-full uno-block" />
										</view>
										<view class="" style="color: #71CDF9;font-size: 8rpx;flex: 1;text-align: left;">
											症状部位：</view>
										<view class="" style="color: #FFFFFF;font-size: 8rpx;">
											{{ item.schemeSymptomPosition.positionName }}
										</view>
									</view>
									<view class="uno-w-full"
										style="height: 20rpx;background-color: rgba(0,233,255,0.15);margin-top: 5rpx;display: flex;align-items: center;justify-content: space-between;padding-left: 6rpx;padding-right: 6rpx;">
										<view class="" style="width: 11rpx;height: 11rpx;margin-right: 6rpx;">
											<image :src="`${baseImgUrl}${item.schemeClassification.schemeTypeIcon}`"
												mode="scaleToFill" class="uno-w-full uno-h-full uno-block" />
										</view>
										<view class="" style="color: #71CDF9;font-size: 8rpx;flex: 1;text-align: left;">
											方案分类：</view>
										<view class="" style="color: #FFFFFF;font-size: 8rpx;">
											{{ item.schemeClassification.schemeTypeName }}
										</view>
									</view>

									<view class="uno-w-full flex-center" style="margin-top: 12rpx;">
										<image src="../../static/images/tlfa_icon_an.png" mode="scaleToFill" class="u"
											style="width: 63rpx;height: 27rpx;" @click="toConfirm(item)" />
									</view>
								</view>
							</z-swiper-item>
						</z-swiper>
					</template>

					<view v-if="list.length" class="uno-w-full flex-center" style="margin-top: 15rpx;">
						<image src="../../static/images/tlfa_icon_jt2.png" mode="scaleToFill" class=""
							style="width: 22rpx;height: 24rpx;margin-right: 44rpx;" @click="prev()" />
						<image src="../../static/images/tlfa_icon_jt1.png" mode="scaleToFill" class=""
							style="width: 22rpx;height: 24rpx;" @click="next()" />
					</view>
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="">

						</view>
						<image src="../../static/images/qrfa_icon_fh.png" mode="scaleToFill" class=""
							style="width: 44rpx;height: 21rpx;margin-right: 16rpx;" @click="back" />
					</view>

				</view>

				<!-- 无调理方案提醒 -->
				<!-- <view v-if="!list.length" class="uno-absolute uno-top-3% uno-right-35% uno-w-30%">
					<tm-alert :shadow="-1" :content="content" :closable="false" color="red" linearDeep="accent"
						linear="right" />
				</view> -->
			</view>
		</BaseLayout>
	</view>
</template>

<style lang="scss" scoped>
	.uno-w-full {
		width: 100%;
	}

	.uno-h-full {
		height: 100%;
	}

	.uno-block {
		display: block;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg1 {
		background: url('../../static/images/tlfa_icon_yhxx.png');
		background-size: 100% 100%;
	}

	.bg2 {
		background: url('../../static/images/tlfa_icon_bjk.png');
		background-size: 100% 100%;
	}

	.bg3 {
		background: url('../../static/images/tlfa_icon_zk.png');
		background-size: 100% 100%;
	}

	.bg4 {
		background: url('../../static/images/tlfa_icon_xz.png');
		background-size: 100% 100%;
	}

	.text1 {
		background: linear-gradient(0deg, #76c0ff 0%, #ffffff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>